<style type="text/less">
    @import "/web/public/public.less";
    #yllzc.course{
        .title{
            border-bottom: 1px solid #eeeeee;
            margin-top: 23px;
            .title_txt{
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 56px;
                letter-spacing: 0px;
                color: #333333;
                display: inline-block;
            }
            .more{
                float: right;
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #7f7f7f;
                line-height: 54px;
            }
        }
        div.info{
            margin-top: 10px;
            .info_left{
                display: inline-block;
                width: 195px;
                vertical-align:middle;
                .name{
                    display:inline-block;
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #6e6e6e;
                    vertical-align: bottom;
                    margin-right: 4px;
                }
                .job{
                    display: inline-block;
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #a8a8a8;
                    vertical-align: bottom;

                }
                .minute{
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 18px;
                    letter-spacing: 0px;
                    color: #6e6e6e;
                    margin-top: 16px;
                    display: block;
                }
            }
            .img_right{
                display: inline-block;
                vertical-align: middle;
                margin-left: 14px;
                overflow: hidden;
                border-radius: 50%;
                img{
                    width: 86px;
                    height: 86px;
                    border-radius: 50%;
                    overflow: hidden;
                    transition: all 0.5s;
                    &:hover{
                        transform: scale(1.03)
                    }
                }
            }
        }
        ul{
            margin-top: 20px;
            li{
                padding-bottom: 24px;
                border-left: 1px solid #eeeeee;
                .list_title{
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 20px;
                    letter-spacing: 0px;
                    color: #6e6e6e;
                    display: block;
                    margin-left: 14px;
                    &:hover{
                        color: #e70115;
                    }
                }
                .list_info{
                    margin-top: 8px;
                    .rate{
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        border: 1px solid #eeeeee;
                        display: inline-block;
                        margin-left: -4.6px;
                        background: #ffffff;
                    }
                    .info_right{
                        float: right;
                        .time{
                            font-size: 14px;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 18px;
                            letter-spacing: 0px;
                            color: #7f7f7f;
                        }
                        .handle{
                            display: inline-block;
                            cursor: pointer;
                            img{
                                width: 14px;
                                display:none
                            }
                        }
                        i{
                            color: #7f7f7f;
                            font-size: 14px;
                            margin-left: 6px;
                        }
                    }
                    .clear{
                        clear: both;
                    }
                }
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<#if channel.channelStatus == 1>
    <div id="yllzc" class="course">
        <audio id="audio" src=""></audio>
        <div class="title">
            <h2 class="title_txt"><a href="${channel.channelHomeUrl}" target="_blank" title="${channel.channelName}">${channel.channelName}</a></h2>
            <a class="more" href="${channel.channelHomeUrl}" target="_blank">更多></a>
        </div>
        <div class="info">
            <div class="info_left">
                <a href="${channel.channelUrl}" target="_blank" class="name" title="${channel.channelName}">${channel.channelAudioTeacherName}</a>
                <a href="${channel.channelUrl}" target="_blank" class="job" title="${channel.channelName}">${channel.channelAudioTeacherJob}</a>
                <a href="${channel.channelUrl}" target="_blank" class="minute" title="${channel.channelName}">${channel.channelAudioTeacherInfo}</a>
            </div>
            <a href="${channel.channelUrl}" target="_blank" class="img_right" title="${channel.channelName}">
                <img src="${channel.channelAudioTeacherImage}" alt="${channel.channelAudioTeacherInfo}">
            </a>
            <ul>
                <#list list as info>
                    <li data="${info.articleAudioUrl}">
                        <#if info.articleOutLinkStatus == 1>
                            <h3><a class="list_title" href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">${info.articleTitle}</a></h3>
                        <#else>
                            <h3><a class="list_title" href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">${info.articleTitle}</a></h3>
                        </#if>
                        <div class="list_info">
                            <div class="rate"></div>
                            <div class="info_right">
                                <span class="time">${info.updateTime}</span>
                                <div class="handle">
                                    <i class="iconfont icon-laba"></i>
                                    <img src="/web/img/bofang.gif" alt="">
                                </div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </li>
                </#list>
            </ul>
        </div>
    </div>
    <script>
        $('.handle').click(function () {
            var audioEle = document.getElementById("audio");
            if ($('#audio').attr('src') == $(this).parents('li').attr('data')) {
                if (audioEle.paused) { /*如果已经暂停*/
                    audioEle.play();   //播放
                    $(this).find('img').attr('src','/web/img/bofang.gif');
                } else {
                    audioEle.pause();  //暂停
                    $(this).find('img').attr('src','/web/img/zanting.png');
                }
            } else {
                audioEle.src = $(this).parents('li').attr('data')
                $(this).parents('li').siblings('li').find('.handle').find('img').attr('src','/web/img/bofang.gif')
                $(this).parents('li').siblings('li').find('.handle').find('img').css('display','none')
                $(this).parents('li').siblings('li').find('.handle').find('i').css('display','inline-block')
                $(this).find('i').css('display','none');
                $(this).find('img').css('display','inline-block');
                audioEle.load();
                if (audioEle.paused) { /*如果已经暂停*/
                    audioEle.play();   //播放
                } else {
                    audioEle.pause();  //暂停
                }
            }

        })
    </script>
</#if>